@userWrapHeight: 90px;

#aside {
    width: @asideWidth;
    user-select: none;
    background: @asideBg;
    // 必须有这个，否则fixed就会让栅格盒子变形
    .body {
        width: inherit;
        height: 100%;
        position: fixed;
        background: inherit;
    }

    .user__wrapper {
        height: @userWrapHeight;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        border-bottom: 1px solid @globalBorderColor;
        background: @asideUserBg;

        .avatar {
            height: 100%;
            display: block;
            border-radius: 2px;
            box-shadow: 0 0 0px 1px @globalBorderColor;
        }

        .nikename {
            margin-left: 10px;
            font-weight: 600;
            color: @globalTitle;
        }
    }

    .nav__wrapper {
        height: calc(100% - @headerHeight - @footerHeight - @userWrapHeight);
        overflow-y: scroll;
        white-space: nowrap;
        background: transparent;
        
        &::-webkit-scrollbar {
            display: none;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        li {
            position: relative;
        }

        a {
            width: 100%;
            height: 100%;
            display: block;
            padding: 10px 0 10px 20px;
            box-sizing: border-box;
            font-size: 1em;
            color: @globalTitle;
            
            @media(min-width: 767px) {
                &:hover {
                    background-color: @headerColor;
                    color: @asideBg;
                }
            }
        }

        .widget-title {
            padding: 10px;
            font-size: 12px;
            color: @globalTextGray;
        }
        // 分类部分
        .category-level-0 {
            margin: 0;
        }

        .category-level-0 .widget-list {
            display: none;

            a {
               padding-left: 40px;
            }
        }

        .active > .widget-list {
            display: block;
        }

        .count {
            padding: 0 3px;
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 12px;
            background-color: @headerColor;
            color: #fff;
            border: 1px solid @headerColor;

            display: none;
        }

        .count-btn {
            cursor: pointer;
        }
    }


    .links {
        width: 100%;
        height: @footerHeight;
        position: absolute;
        bottom: @footerHeight;
        border-top: 1px solid @globalBorderColor;
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-around;
        text-align: center;
        background: @asideLinksBg;   
        color: @globalTextGray;
        
        li {
            cursor: pointer;
            padding: 8px 0;
            box-sizing: border-box;
            font-size: 12px;
            user-select: none;
        }

        li:hover {
            color: @globalText;
        }

        .iconfont {
            font-size: 16px;
            color: inherit;
        }
    }

}